<template>
  <div id="revise">
    <div class="content">
      <div class="text-size-md info orange">经验值:{{$store.state.xp}} <span  v-if="show" class="add text-size-lg animated fadeInUp" >+1</span></div>
      <p class="text-size-md">请输入听到的单词</p>
      <input type="text" placeholder="请在此输入" class="word" v-model="writeWord">
      <div class="img">
        <img src="../assets/images/sound.png" alt="" @click="play">
        <audio id="music" :src="nsrc" autoplay="true">
          <source  type="audio/mp3">
        </audio>
      </div>
    </div>
    <nav-btn @click.native="check" text="下一题" position="fixed" backgroundName="green"></nav-btn>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import VueResource from 'vue-resource'
  Vue.use(VueResource)
  import navBtn from '../components/nav-btn.vue'
  export default{
    name:'revise',
    data(){
      return {
        'number':0,
        "form":'',
        "meaning":'',
        "nsrc":"",
        "writeWord":'',
        "show":false
      }
    },
    components:{navBtn},
    methods:{
      getword:function(){
        var xmlhttp,state,_this = this;
        xmlhttp = new XMLHttpRequest()
        xmlhttp.onreadystatechange=function () {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            state = JSON.parse(xmlhttp.responseText).data;
            console.log(state)
          }else{
//            _this.push({path:'/ErrorPage'})
          }
        }
        xmlhttp.open('GET','/api/words',false);
        xmlhttp.send();
        let n = this.number;
        this.form = state[n].form;
        this.meaning = state[n].meaning;
        this.nsrc = state[n].nsrc;
//        this.$http.get('/api/words').then(function(res){
//          console.log(res);
//          this.form = res.data[this.number].form;
//          this.meaning = res.data[this.number].meaning;
//          this.nsrc = res.data[this.number].nsrc;
//          this.number ++;
//
//        },function(error){
//          console.log('失败');
//        })
      },
      play:function(){
        var audio = document.getElementById('music');
        audio.currentTime = 0;
        audio.play();
      },
      check:function(){
        if(this.form == this.writeWord){
          this.$store.state.xp++;
          this.show = true;
           if(this.number == 3){
            alert("恭喜你完成本次复习计划!")
            this.router.push({path:'/index'})
          }

          this.getword();
          this.writeWord = '';
          setTimeout(()=>{
            this.show = false;
          },1000)

        }else{
          this.$router.push({path:'/reviseError?word='+this.writeWord+'&number='+this.number})
//          this.$router.push({path:'/reviseError#word='+this.writeWord+'#number='+this.number})
//          this.$router.push({path:'/reviseError/:'+this.number})


        }
      }

    },
    mounted:function(){
      this.getword();
    }
//    beforeCreate:function () {
//      this.getword();
//    }
  }
</script>

<style scoped lang="less">
  @import "../assets/css/variables.less";
  .content{
    padding:20px;
  }
  span.add{float:right;color:@orange;}
  div.info{
    line-height:40px;
    margin-top:20px;
  }
  p{
    margin:50px 0;
  }
  input{
    width:100%;
    height:50px;
    border:none;
    border-bottom:1px solid @gray-light;
    text-align: center;
    font-size:150%;
    outline: none;
    color:@green;
  }
  div.img{
    margin-top:50px;
    width:100%;
    height:100px;
    /*background:url('../assets/images/sound.png') no-repeat center center;*/
  }
  div.img img{
    width:160px;
    display: block;
    margin:0 auto;
  }
</style>
